import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import {
  Button,
  Badge,
  Card,
  Col,
  Collapse,
  ConfigProvider,
  Empty,
  Form,
  Row,
  Select,
  Table,
  Tabs,
  Input,
  Descriptions,
} from 'antd';
import { FormInstance } from 'antd/lib/form';
import zhCN from 'antd/lib/locale/zh_CN';
import type { ColumnsType, TableProps } from 'antd/es/table';

const { Panel } = Collapse;

//挂科详情数据列
const columns = [
  {
    title: '课程号',
    dataIndex: 'courseCode',
  },
  {
    title: '课程名',
    dataIndex: 'courseLabel',
  },
  {
    title: '考试日期',
    dataIndex: 'examDate',
  },
  {
    title: '成绩',
    dataIndex: 'score',
  },
  {
    title: '课程绩点',
    dataIndex: 'gpaScore',
  },
  {
    title: '学分',
    dataIndex: 'credit',
  },
  {
    title: '授课老师姓名',
    dataIndex: 'teacherName',
  },
  {
    title: '授课老师学号',
    dataIndex: 'teacherCode',
  },
];

const PrecautionStudentDetail = () => {
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>();
  const [result, setResult] = useState([]);

  useEffect(() => {
    dispatch({
      type: 'Model_StudentAnalysisStudentModel/getPrecautionDetailEffects',
      payload: {
        studentCode: 171431,
        callback: (value: any) => {
          setResult(value); //通过该方法可以将从model层取出来的value，放到组件的全局使用
          // console.log(value);
        },
      },
    });
  }, []);

  return (
    <ConfigProvider locale={zhCN}>
      {/* 学生详细信息 */}
      <Card style={{ marginBottom: 30 }}>
        <Descriptions
          title={`${result.studentName}的信息`}
          bordered
          column={4}
          style={{ marginBottom: 30 }}
        >
          <Descriptions.Item label="姓名（Name）">
            {result.studentName}
          </Descriptions.Item>
          <Descriptions.Item label="学号（Student id）">
            {result.studentCode}
          </Descriptions.Item>
          <Descriptions.Item label="班级（Class）">
            {result.classLabel}
          </Descriptions.Item>
          <Descriptions.Item label="学生电话（Student tel）">
            {result.studentNumber}
          </Descriptions.Item>
          <Descriptions.Item label="专业（Major）">
            {result.majorLabel}
          </Descriptions.Item>
          <Descriptions.Item label="年级（Grade）">
            {result.enrollmentYear}
          </Descriptions.Item>
          <Descriptions.Item label="家长姓名（Parents name）">
            {result.parentName}
          </Descriptions.Item>
          <Descriptions.Item label="家长电话（Parents tel）">
            {result.parentNumber}
          </Descriptions.Item>
        </Descriptions>

        {/* 挂科课程详细信息 */}
        <Col>
          <Collapse>
            <Panel header={'挂科课程详细信息'}>
              <Table dataSource={result.classInfo} columns={columns} />
            </Panel>
          </Collapse>
        </Col>
      </Card>
    </ConfigProvider>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel }: any) => ({
  Model_StudentAnalysisStudentModel,
}))(PrecautionStudentDetail);
